<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Propsage tutorial</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="css/popup.css" />
<script type="text/javascript" src="js/jquery.popup.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.fastLiveFilter.js"></script>
<script type="text/javascript" charset="utf-8" src="js/data.js"></script>
<script type="text/javascript" language="JavaScript">
	$(function(){
        $('input[rel*=tutorialPopup]').showPopup({ 
        	top : 50, 
        	closeButton: ".close_popup" ,
			scroll : false, 
        	onClose:function(){  
        	}
        });	
	});

	function addCommas(num) {
		num = String(num);
		var rgx = /(\d+)(\d{3})/;
		while (rgx.test(num)) {
			num = num.replace(rgx, '$1' + ',' + '$2');
		}
		return num;
	}
	
	$(function() {
		var lists = $('#list_to_filter');
		for (i in data)
		{
			movieTitle = data[i];
			lists.append('<li><a href="#">' + movieTitle + '</a></li>');
		}
		var numDisplayed = $(".num_displayed");
		$("#filter_input").fastLiveFilter("#list_to_filter", {
			callback: function(total) { numDisplayed.html(addCommas(total)); },
		});
	});
</script>
<style>
	#open_popup {color: #FEF4E9;border: solid 1px #DA7C0C;background: #F78D1D;background: -webkit-gradient(linear, left top, left bottom, from(#FAA51A), to(#F47A20));background: -moz-linear-gradient(top, #FAA51A, #F47A20);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');display: inline-block;outline: none;cursor: pointer;text-align: center;text-decoration: none;font: 12px/100% Arial, Helvetica, sans-serif;padding: .5em 2em .55em;text-shadow: 0 1px 1px rgba(0, 0, 0, .3);-webkit-border-radius: .5em;-moz-border-radius: .5em;border-radius: .5em;-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}
.info_popup{
border:1px solid #078F02;
width:400px;
background-color:#F2F2F2;
}
#filter_input{width:350px;margin:0 23px;height:25px;}
#popup_content h1{text-align:center;}
ul#list_to_filter li {list-style-type: none;margin:5px 0;}
#list_to_filter{
	height:250px;
	overflow:scroll;
	width:auto;
}
</style>
</head>
<body>
	<!-- begin popup -->
	 <div align="center" class="center">
		<input type="button" id="open_popup" name="open_popup" rel="tutorialPopup" href="#popup_content" value="Tutorials"/>
	</div>
	<div id="popup_content" class="popup">
		<div class="info_popup">
		<a class="close_popup" href="javascript:void(0)"></a>
			<h1>Tutorials</h1>
			<input id="filter_input" placeholder="Search" />
			<ul id="list_to_filter">
				<li><a class="t-btn" href="Javascript:" id="tutorialize_demo">Demo</a></li>
			<li><a class="t-btn" href="Javascript:" id="tutorialize_login">Login</a></li>
			<li><a class="t-btn" href="Javascript:" id="tutorialize_logout">Logout</a></li>
			<li><a class="t-btn" href="Javascript:" id="tutorialize_change_pass">Change Your Password</a></li>
			<li><a class="t-btn" href="Javascript:" id="tutorialize_profile_photo">Update Your Profile Photo</a></li>
			<li><a class="t-btn" href="Javascript:" id="tutorialize_bank_detail">Update Your Bank Details</a></li>
			<li><a class="t-btn" href="Javascript:" id="tutorialize_your_transactions">How to Search for your Transactions</a></li>
			<li><a class="t-btn" href="Javascript:" id="tutorialize_draft_transaction">Creating a Draft Transaction</a></li>
			<li><a class="t-btn" href="Javascript:" id="tutorialize_sale_transaction">Creating a Sale Transaction Part 1</a></li>
			<li><a class="t-btn" href="Javascript:" id="tutorialize_upload_scan">Create Digital Forms - Upload Scan Docs</a></li>
			<li><a class="t-btn" href="Javascript:" id="tutorialize_internal_broker">Adding Internal Co-Brokers</a></li>
			</ul>
		</div>
	</div>
   <!-- end -->
</body>
</html>


